#header {
  #logo {
    color: white;
    width: 6rem;
    line-height: 50px;
    text-indent: 0;
    text-decoration: none;
    font-size: 28px;
    font-weight: 700;
  }

  #main-nav {
    a {
      .fa {
        padding-right: 0.4em;
        font-size: 0.9em;
        opacity: 0.7;
      }
      padding: 0 20px 0 10px;
      opacity: 0.9;
    }

    #search-input {
      min-width: 16em;
    }
  }
}

#mobile-nav {
  a {
    .fa {
      padding-right: 0.4em;
    }
  }
}

#sidebar {
  .sidebar-title {
    margin-top: 30px;
  }
}

#banner {
  #banner-title {
    color: #fff;
    opacity: 0.8;
    font-weight: 600;
  }

  #banner-share {
    .github-button, .twitter-follow-button {
      text-decoration: none;
      color: color-navy;
    }
  }

  .shields-images {
    a {
      text-decoration: none !important;
    }
  }
}

#content-wrap {
  .features {
    width: 88%;
    margin: 2.5em auto;

    @media mq-mobile {
      width: 100%;
    }

    li {
      line-height: 2em;
      font-size: 1em;
      color: #666;
      font-weight: 700;

      .fa {
        color: #637ABF;
        font-size: 1em;
        margin: 0 0.3em;
      }
    }
  }

  .sponsors-wrapper-pc, .sponsors-wrapper-mobile {
    padding: 3.5em 0;
    background: color-sponsors;
    display: none;

    @media mq-mobile {
      &.sponsors-wrapper-mobile {
        display: block;
      }
      padding: 0.2em auto;
    }
    @media mq-normal {
      &.sponsors-wrapper-pc {
        display: block;
      }
    }

    .inner {
      max-width: 1280px;
      padding: 0 20px;
      margin: 0 auto;
    }

    .sponsors {
      width: 88%;
      margin: 0 auto 2em;

      @media mq-mobile {
        width: 100%;
      }

      object {
        width: 100%;
      }

      h1 {
        margin: 1.5em 0 0.8em;
        font-size: 2em;
        color: white;
        font-weight: 700;
      }
    }
  }

  .backers-list {
    a {
      display: inine;
      padding: 5px;
      img {
        border-radius: 50%;
      }
    }
    br {
      display: none;
    }
  }

  .page-not-found {
    margin: 10em auto 40px auto;
    width: 600px;
    text-align: center;
    min-height: 30em;

    h1 {
      position: relative;
      letter-spacing: -1px;
      line-height: 60px;
      font-size: 60px;
      font-weight: 100;
      margin: 0px 0 50px 0;
      text-shadow: 0 1px 0 #fff;
    }

    p {
      color: rgba(0, 0, 0, 0.5);
      margin: 20px 0;
      line-height: 1.6;
    }
  }
}

#footer {
  .inner {
    width: 88%;
    margin: 2.5em auto;

    @media mq-mobile {
      width: 100%;
    }
  }
}

#article-toc {
  &.fixed {
    #sidebar-ad-wrapper {
      margin-top: 10px
    }
    .sidebar-title {
      margin-top: 10px;
    }
    .sidebar-title {
      border-top: 2px solid #5F9AD1;
    }

    #carbonads {
      border-left: 2px solid color-link;

      .carbon-text {
        font-weight: 400;
      }

      .carbon-poweredby {
        font-size: 0.5em
        font-weight: 500;
      }
    }
  }

  #sidebar-ad-wrapper {
    margin-top: 30px
  }

  .sidebar-title {
    margin-top: 30px;
  }
}
